<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframePlyer</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/iframePlayer.css">
</head>
<body>
    <div class="iframePlayer pr" style="background-image:url('https://cdna.artstation.com/p/assets/images/images/001/337/630/large/wl-op-7s.jpg?1444639378')">
        <a href="javascript:void(0);">
            <div class="cover transition pa"></div>
            <div class="playIcon tac pa"><i class="fa fa-video-camera"></i></div>
            <div class="living transition tac pa">
                <p class="livingIcon"></p>
                <p class="text">正在直播</p>
                <p class="text dn">即将直播</p>
            </div>
        </a>
    </div>
    <br>
    <div class="iframePlayer pr" style="background-image:url('https://cdna.artstation.com/p/assets/images/images/001/337/630/large/wl-op-7s.jpg?1444639378')">
        <div class="lockCover tac pa">
            <p class="icon"><i class="fa fa-lock"></i></p>
            <a class="db tac transition br5" href="javascript:void(0);">订阅观看</a>
        </div>
        <a href="javascript:void(0);">
            <div class="cover transition pa"></div>
            <div class="playIcon tac pa"><i class="fa fa-video-camera"></i></div>
        </a>
    </div>
    <br>
    <div class="iframePlayer pr">
        <div class="infoMsg tac">
            <span class="pic dib"></span>
            <p class="text">为了更好的播放体验，建议安装最新版Chrome或Firefox浏览器</p>
            <p class="text">
                <a class="download feb" href="javascript:void(0);">下载播放器</a>
            </p>
            <p class="text">
                <a class="question" href="javascript:void(0);">常见问题</a>
                <a class="feedBack" href="javascript:void(0);">意见反馈</a>
            </p>
        </div>
    </div>
    <br>
    <div class="iframePlayer pr">
        <div class="cover transition pa"></div>
        <div class="playIcon tac pa"><i class="fa fa-video-camera"></i></div>
        <div class="tac timeInfo pr">
            <div class="time tac pa">
                <p>直播时间:
                    <span class="day">10</span>天
                    <span class="hours">20</span>小时
                    <span class="minutes">30</span>分
                    <span class="seconds">43</span>秒
                </p>
            </div>
            <div class="defaultPic"></div>
        </div>
    </div>
    <br>
    <div class="iframePlayer activity pr">
        <div class="cover transition pa"></div>
        <div class="playIcon tac pa"><i class="fa fa-video-camera"></i></div>
        <div class="tac timeInfo pr">
            <div class="time tac pa">
                <p>直播时间:
                    <span class="date">2018-04-05</span>
                    <span class="hour">10:30:00</span>
                </p>
            </div>
            <div class="btns pa">
                <a class="dib br5 transition tac buy" href="javascript:void(0);">
                    <i class="fa fa-lock"></i>
                    <span class="price">￥19.9</span>
                    预约
                </a>
                <a class="dib br5 transition tac" href="javascript:void(0);">代金券</a>
                <a class="dib br5 transition tac" href="javascript:void(0);">三人组团</a>
            </div>
            <div class="defaultPic"></div>
        </div>
    </div>
    <br>
</body>
</html>